<!--
 * @Author: xu xuejia
 * @Date: 2021-12-08 16:38:34
 * @LastEditors: xu xuejia
 * @LastEditTime: 2021-12-09 16:15:01
 * @Description: 文件分片上传测试页面
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\projectexam\RewardDetail.vue
-->
<template>
  <div class="page">
    <div id="filePicker">选择文件</div>
    <div class="file-panel">
      <h2>文件列表</h2>
      <!--<div class="file-list">
         v-for="file in fileList" class="file-item" :class="`file-${file.id}`"
        <span  v-for="file in fileList" class="file-item" :class="`file-${file.id}`">
          <li class="file-type" />
          <li class="file-name">{{ file.name }}</li>
          <li class="file-size">{{ fileSize(file.size) }}</li>
          <li class="file-status">上传中...</li>
          <li class="file-operate">
            <a title="开始" @click="resume(file)">开始</a>
            <a title="暂停" @click="stop(file)">暂停</a>
            <a title="移除" @click="remove(file)">移除</a>
          </li>
          <li class="progress" />
        </span>
        <div v-if="!fileList.length" class="no-file"> 暂无待上传文件</div>
      </div>-->
      <span v-for="(item, index) in fileList" :key="index" class="file-item" :class="`file-${item.id}`">
        <li class="file-type" />
        <li class="file-name">{{ item.name }}</li>
        <li class="file-size">{{ fileSize(item.size) }}</li>
        <li class="file-status">上传中...</li>
        <li class="file-operate">
          <a title="开始" @click="resume(item)">开始</a>
          <a title="暂停" @click="stop(item)">暂停</a>
          <a title="移除" @click="remove(item)">移除</a>
        </li>
        <li class="progress" />
      </span>
    </div>
    <vue-upload
      ref="uploader"
      upload-button="#filePicker"
      multiple
      @fileChange="fileChange"
      @progress="onProgress"
      @success="onSuccess"
    />
  </div>
</template>

<script>
import $ from 'jquery'
import WebUploader from 'webuploader'
import vueUpload from '../../components/vueUpload.vue'
// import api from '@/assets/js/api'
export default {
  name: 'Rewarddetail',
  components: {
    vueUpload
  },
  data() {
    return {
      fileList: []
    }
  },
  computed: {
    uploader() {
      return this.$refs.uploader
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    /**
     * @description: 文件进入文件列表
     * @param {*} file
     * @return {*}
     * @author: xu xuejia
     */
    fileChange(file) {
      if (!file.size) return
      this.fileList.push(file)
      console.log(file)
    },
    /**
     * @description: 文件传输进度
     * @param {*} file
     * @param {*} percent
     * @return {*}
     * @author: xu xuejia
     */
    onProgress(file, percent) {
      $(`.file-${file.id} .progress`).css('width', percent * 100 + '%')
      $(`.file-${file.id} .file-status`).html((percent * 100).toFixed(2) + '%')
    },
    onSuccess(file, response) {
      console.log('上传成功', response)
      // if (response.needMerge) {
      //   api.mergeUpload({
      //     tempName: response.tempName,
      //     fileName: file.name
      //   }).then(res => {
      //     const $fileStatus = $(`.file-${file.id} .file-status`)
      //     console.log(res)
      //     if (res.status === 0) {
      //       $fileStatus.html('上传成功，转码中')
      //     } else if (res.status === 1) {
      //       $fileStatus.html('上传失败')
      //     } else if (res.status === 2) {
      //       $fileStatus.html('上传成功')
      //     }
      //   })
      // }
    },
    resume(file) {
      this.uploader.upload(file)
    },
    stop(file) {
      this.uploader.stop(file)
    },
    remove(file) {
      // 取消并中断文件上传
      this.uploader.cancelFile(file)
      // 在队列中移除文件
      this.uploader.removeFile(file, true)
      // 在ui上移除
      const index = this.fileList.findIndex(ele => ele.id === file.id)
      this.fileList.splice(index, 1)
    },
    fileSize(size) {
      return WebUploader.Base.formatSize(size)
    },
    fileCategory(ext) {
      let type = ''
      const typeMap = {
        image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
        video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
        text: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
      }
      Object.keys(typeMap).forEach((_type) => {
        const extensions = typeMap[_type]
        if (extensions.indexOf(ext) > -1) {
          type = _type
        }
      })
      return type
    }
  }
}
</script>

<style lang="scss">
    $h-row: 50px;
    .file-panel {
        width: 840px;
        margin-top: 10px;
        box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
        > h2 {
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            border-radius: 4px 4px 0 0;
            border-bottom: 1px solid #ccc;
            background-color: #fff;
        }
        .file-list {
            position: relative;
            height: 360px;
            overflow-y: auto;
            background-color: rgb(250, 250, 250);
        }
        .file-item {
            position: relative;
            height: $h-row;
            line-height: $h-row;
            padding: 0 10px;
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            z-index: 1;
            > li {
                display: inline-block;
            }
        }
        .file-type {
            width: 24px;
            height: 24px;
            vertical-align: -5px;
        }
        .file-name {
            width: 40%;
            margin-left: 10px;
        }
        .file-size {
            width: 20%;
        }
        .file-status {
            width: 20%;
        }
        .file-operate {
            width: 10%;
            > a {
                padding: 10px 5px;
                cursor: pointer;
                color: #666;
                &:hover {
                    color: #ff4081;
                }
            }
        }
        // .file-type[icon=text] {
        //     background: url(../../assets/images/icon/text-icon.png);
        // }
        // .file-type[icon=video] {
        //     background: url(../../assets/images/icon/video-icon.png);
        // }
        // .file-type[icon=image] {
        //     background: url(../../assets/images/icon/image-icon.png);
        // }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            height: $h-row - 1;
            width: 0;
            background-color: #E2EDFE;
            z-index: -1;
        }
        .no-file {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }
    }
</style>
